<!DOCTYPE HTML>
<html>

<head>
    <title>H5STREAM VIDEO</title>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/adapter.js"></script>
    <script src="js/platform.js"></script>
    <script src="js/h5splayer.js"></script>
    <script src="js/h5splayerhelper.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        .h5videodiv {
            width: 100%;
            height: 100%;
        }

        .h5video {
            width: 100%;
            height: 100%;
        }

        .controls {
            position: fixed;
            z-index: 100;
            right: 20px;
            bottom: 15%;
            width: 200px;
            height: 300px;
            background-color: rgba(17, 17, 17, 0.6);
            border-radius: 10px;
        }

        .directionControls {
            height: 60%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pie {
            transform: scale3d(1.22, 1.22, 1.22);
            position: relative;
            padding: 0;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            list-style: none;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .pie .center {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(17, 17, 17);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pie .center::after {
            content: "";
            position: absolute;
            width: 25px;
            height: 25px;
            /* top: 25px; */
            /* left: 25px; */
            border-radius: 50%;
            background-color: rgba(17, 17, 17);
            border: 1px solid #fff;
        }

        .pie .slice {
            background-color: rgba(17, 17, 17, 0.8);
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 50%;
            transform-origin: 0 100%;
        }

        .pie .slice:active {
            background-color: #268cf2;
        }

        .pie .slice:active .dv .sj {
            border-bottom: 5px solid white;
        }

        .pie .slice .dv {
            transform: skewY(45deg) rotate(22.5deg);
            margin-top: 50px;
            margin-left: 7px;
        }

        .pie .slice .dv .sj {
            position: fixed;
            bottom: 0;
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #fff;
            border-left: 5px solid transparent;
        }

        .pie .slice.slice-one {
            transform: rotate(-22.5deg) skewY(-45deg);
        }

        .pie .slice.slice-two {
            transform: rotate(22.5deg) skewY(-45deg);
        }

        .pie .slice.slice-three {
            transform: rotate(67.5deg) skewY(-45deg);
        }

        .pie .slice.slice-four {
            transform: rotate(112.5deg) skewY(-45deg);
        }

        .pie .slice.slice-five {
            transform: rotate(157.5deg) skewY(-45deg);
        }

        .pie .slice.slice-six {
            transform: rotate(202.5deg) skewY(-45deg);
        }

        .pie .slice.slice-seven {
            transform: rotate(247.5deg) skewY(-45deg);
        }

        .pie .slice.slice-eight {
            transform: rotate(292.5deg) skewY(-45deg);
        }

        .buttonControls {
            color: #fff;
            width: 100%;
            height: 40%;
            display: flex;
            flex-wrap: wrap;
        }

        .buttonControls > div {
            width: 100%;
            height: 30%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #fff;
            padding: 0 20%;
        }

        .buttonControls img {
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/h5splayer.css"/>

</head>

<body>

<div class="h5videodiv">
    <video class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline>
    </video>
    <!-- <div class="playpause" id="playpause1" ></div> -->
    <div class="controls">
        <div class="directionControls">
            <div class="pie">
                <div class="slice-one slice" id="top">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-two slice" id="upright">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-three slice" id="right">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-four slice" id="downright">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-five slice" id="down">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-six slice" id="downleft">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-seven slice" id="left">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="slice-eight slice" id="upleft">
                    <div class="dv">
                        <div class="sj"></div>
                    </div>
                </div>
                <div class="center"></div>
            </div>
        </div>
        <div class="buttonControls">
            <div><img onmousedown="zoominDown()" onmouseup="stop()" width="30px" src="./images/add.png" alt="">缩放
                 <img onmousedown="zoomoutDown()" onmouseup="stop()" width="30px" src="./images/jian.png" alt="">
            </div>
            <div><img onmousedown="focusinDown()" onmouseup="stop()" width="30px" src="./images/add.png" alt="">聚焦<img
                    onmousedown="focusoutDown()" onmouseup="stop()" width="30px" src="./images/jian.png" alt="">
            </div>
        </div>
    </div>
</div>
</body>

<script>
    const searchParams = new URLSearchParams(window.location.search);
    const code = searchParams.get('code');
    if (code == '1' || code == '2' || code == '3') {
        $('.controls').hide();
    }
    if (H5siOS() === true
        || H5sSafariBrowser() === true) {
        $('#h5sVideo1').prop("controls", true);
    }
    let session;
    $.ajax({
        url: 'http://10.59.30.132:18888/api/v1/Login?user=admin&password=f9622c85da075eb23bfc6d8f392e1a72',
        type: 'get',
        async: false,
        success: (res) => {
            session = res.strSession
            var conf1 = {
                videoid: 'h5sVideo1',
                protocol: window.location.protocol, //'http:' or 'https:'
                host: '10.59.30.132:18888', //'localhost:8080'
                rootpath: '/', // '/' or window.location.pathname
                token: code + '--1',
                hlsver: 'v1', //v1 is for ts, v2 is for fmp4
                session: session //session got from login
            };

            var v1 = H5sPlayerCreate(conf1);
            v1.connect();

        }
    })
    $('.slice').mousedown((res) => {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=${res.currentTarget.id}&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    })
    $('.slice').mouseup(res => {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=stop&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    });

    function focusinDown() {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=focusin&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    }

    function focusoutDown() {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=focusout&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    }

    function stop() {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=stop&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    }

    function zoominDown() {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=zoomin&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    }

    function zoomoutDown() {
        $.ajax({
            url: `http://10.59.30.132:18888/api/v1/Ptz?token=${code}--1&action=zoomout&speed=0.6&session=${session}`,
            type: 'get',
            async: false,
        })
    }
</script>

</html>